<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @change-pagination="changePagination"
      >
        <template v-slot:header>
          <c-search :form-model="formData" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
        </template>
      </c-table>
    </div>
    <div v-if="dialogObj.isShow">
      <c-dialog
        class="dialog-box"
        :is-show="dialogObj.isShow"
        :title="dialogObj.title"
        close-btn
        :btns="btns"
        @before-close="dialogObj.isShow = false"
        @on-submit="dialogConfirm"
      >
        <!-- <bind-add ref="childRef" v-if="dialogObj.showType === 1" :init-data.sync="dialogObj.initData"></bind-add> -->
        <oms-details ref="childRef" v-if="dialogObj.showType === 2" :init-data.sync="dialogObj.initData"></oms-details>
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
import CDialog from 'components/dialog'
// import BindAdd from './add'
import omsDetails from './omsDetails'
// import omsApi from '../../api/omsApi.js'
import { omsOrderListApi } from '@/api/omsApi'
import dictObj from '@/store/dictData'

export default {
  name: 'owner',
  mixins: [mixinTable],
  components: {
    CDialog,
    // BindAdd
    omsDetails
  },
  data(vm) {
    return {
      // 对话框对象
      dialogObj: {},
      // 表格内操作按钮
      tableInnerBtns: [
        // {
        //   name: '删除',
        //   icon: 'el-icon-delete',
        //   handle(row) {
        //     vm.delItem(row)
        //   }
        // },
        // {
        //   name: '绑定车辆',
        //   icon: 'el-icon-connection',
        //   handle(row) {
        //     vm.showDialog({
        //       initData: {
        //         id: row.id
        //       },
        //       showType: 1,
        //       title: `给用户(${row.phone})绑定车辆`
        //     })
        //   }
        // },
        {
          name: '查看评价',
          icon: 'el-icon-view',
          handle(row) {
            vm.showDialog({
              initData: row,
              showType: 2,
              title: '查看评价'
            })
          }
        }
      ],
      tableHeader: [
        {
          label: '订单号',
          prop: 'orderNo',
          fixed: true
        },
        {
          label: '网点ID',
          prop: 'ssmId'
        },
        {
          label: '名称',
          prop: 'customerName',
          search: {
            type: 'input'
          }
        },
        //    {
        //      label: '名称',
        //      prop: 'customerName',
        //      width: 100,
        // search: {
        //   type: 'select',
        // 	optionsList: [{
        // 		value: '选项1',
        // 		label: '黄金糕'
        // 	}, {
        // 		value: '选项2',
        // 		label: '双皮奶'
        // 	}, {
        // 		value: '选项3',
        // 		label: '蚵仔煎'
        // 	}, {
        // 		value: '选项4',
        // 		label: '龙须面'
        // 	}, {
        // 		value: '选项5',
        // 		label: '北京烤鸭'
        // 	}],
        // 	change: (e)=>{
        // 		console.log('125====', e);
        // 	}
        // }
        //    },
        {
          label: '订单状态',
          prop: 'status',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.status, 'orderStatusList'),
          search: {
            type: 'dict',
            optionsList: dictObj.orderStatusList
          }
        },
        {
          label: '退款状态',
          prop: 'refundStatus',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.refundStatus, 'refundStatusList'),
          search: {
            type: 'dict',
            optionsList: dictObj.refundStatusList
          }
        },
        {
          label: '支付状态',
          prop: 'payStatus',
          width: 100,
          formatter: row => row && vm.setTableColumnLabel(row.payStatus, 'payStatusList'),
          search: {
            type: 'dict',
            optionsList: dictObj.payStatusList
          }
        },
        {
          label: '创建时间',
          prop: 'createTime'
        },
        {
          label: '门店图片',
          prop: 'ssmImgUrl',
          isImage: true
        }
        // {
        //   label: '手机号',
        //   prop: 'phone',
        //   width: 100,
        //   fixed: false,
        //   search: {
        //     type: 'input',
        // 		change: (e)=>{
        // 			console.log('101====', e);
        // 		}
        //   }
        // },
      ],
      formData: {
        pageSize: 10,
        pageNo: 1,
        customerName: '',
        status: '',
        refundStatus: '',
        payStatus: '',
        ssmId: ''
      },
      pageInfo: {
        totalNum: 0,
        pageNo: 1,
        pageSize: 10
      },
      btns: [{ label: '关 闭', name: 'cancel' }]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    /*
     * 查询表格列表数据
     */
    getData() {
      this.isLoading = true
      omsOrderListApi({
        pageSize: this.formData.pageSize,
        pageNo: this.formData.pageNo,
        customerName: this.formData.customerName,
        status: this.formData.status,
        refundStatus: this.formData.refundStatus,
        payStatus: this.formData.payStatus,
        ssmId: this.formData.ssmId
      }).then(res => {
        this.isLoading = false
        console.log('144====', res)
        this.tableList = res.data.data

        this.pageInfo = {
          totalNum: res.totalCount,
          pageNo: this.formData.pageNo,
          pageSize: this.formData.pageSize
        }
      })
      // const { pageNo, pageSize } = this.pageInfo
      // const { dateTime, ...other } = this.searchObj
      // const searchDate = this.getSearchDate(dateTime, 'dateTime')
      // this.isLoading = true
      // this.$api.owner
      //   .fetch('queryOwnerPeopleList', {
      //     ...searchDate,
      //     ...other,
      //     pageNo,
      //     pageSize
      //   })
      //   .then(res => {
      //     this.isLoading = false
      //     if (res && res.totalCount) {
      //       const { data, totalCount } = res
      //       this.pageInfo.totalNum = totalCount
      //       this.tableList = data || []
      //     } else {
      //       this.tableList = res || []
      //     }
      //   })
    },
    /**
     * dialog对话框数据处理
     * @opts {*}
     */
    showDialog(opts) {
      console.log('265===', opts)
      // this.childRef.formModel
      this.dialogObj = {
        showType: opts.showType,
        isShow: true,
        title: opts.title,
        initData: opts.initData
      }
    },
    /**
     * dialog新增、编辑处理函数
     */
    dialogConfirm() {
      const childRef = this.$refs.childRef
      childRef.$refs.formRef.validate(valid => {
        if (valid) {
          const params = childRef.formModel
          this.$api.owner.fetch('ownerPeopleBingCar', params).then(() => {
            this.responeHandle('绑定车辆成功')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    searchSubmit() {
      this.formData.pageNo = 1
      this.formData.pageSize = 10
      this.getData()
    },
    changePagination(e) {
      console.log('217===', e)
      this.formData.pageNo = e.page
      this.formData.pageSize = e.limit
      this.getData()
    },
    searchReset() {},
    delItem(id) {
      console.log('300====', id)
      this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {})
        .catch(() => {})
    }
  }
}
</script>
